<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="http://cdn.bootstrapmb.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- customer-details CSS -->
    <link rel="stylesheet" href="css/mobiscroll.custom.min.css">
    <link rel="stylesheet" href="css/customer-details.css">
    <link rel="stylesheet" href="css/tel-note.css">
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/popper.min.js"></script>
     <script src="http://cdn.bootstrapmb.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
     
</head>
<body>
    <div class="main">
        <div class="header">
            <a href="my-customer.html">
                <img src="img/myCustomer/icon.png">
            </a>
            
        </div>
        <!-- 客户信息简介 -->
        <div class="introduction">
            <div class="head">
                <div class="fl">
                    <img src="img/myCustomer/head.png">
                </div>
                <div class="fr">
                    <div class="cus-name">
                        <div>刘先生</div>
                        <div class="sign">
                            <span>签约</span>
                        </div>
                    </div>
                    <div class="sign-time">
                        <span>签约时间:</span>
                        <span>
                            2020-06-20 20:56
                        </span>
                    </div>
                    <div class="consultant">
                        <span>案场顾问:</span>
                        <span>汪恒宇 </span>
                        (<span>梁一博组梁一博团队</span>)
                        
                    </div>
                   
                </div>        
            </div>
            <div class="contact">
                <div class="tele">
                    <div class="tel-img">
                        <img src="img/myCustomer/details-tel.png">
                    </div>
                    <div><span>18345068265</span></div>
                </div>
                <div class="text">
                    <div class="note-img"><img src="img/myCustomer/details-note.png"></div>
                    <div><span>发送短信</span></div>
                </div>
            </div>
        </div>
        <!-- 基本信息、客户轨迹 -->
        <div class="info-details">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                  <a href="#baseinfo" class="nav-link active" data-toggle="tab">基本信息</a>
                </li>
                <li class="nav-item">
                  <a href="#custrack" class="nav-link" data-toggle="tab">客户轨迹</a>
                </li>
               
              </ul>
              <div class="tab-content">
                  <!--基本信息 -->
                <div id="baseinfo" class="tab-pane active">
                    <div class="user-tel">
                        <span>手机号码<span class="red">*</span></span>
                        <span>18345068265</span>
                    </div>
                    <div class="user-name">
                        <span>客户姓名<span class="red">*</span></span>
                        <span>刘先生</span>
                    </div>
                    <div class="remarks">
                        <span>客户备注</span>
                        <span>上次备注：
                            <span>2020-07-15 14:04</span>
                        </span>
                    </div>
                    <textarea name="beihzu" id="" cols="35" rows="3" placeholder="备注内容"></textarea>
                    <div class="replace-btn">
                        <span>更新</span>
                    </div>
                </div>
                <!-- 客户轨迹 -->
                <div id="custrack" class="tab-pane">
                    <div class="track-top">
                        <div>
                            <span>推荐成功</span>
                            <span>已到访</span>
                            <span>已成交</span>
                        </div>
                        <div>
                            <div>
                                <div class="circle">
                                    <div></div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div>
                                <div class="circle">
                                    <div></div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div>
                                <div class="circle actived">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="track-body">
                        <div class="body-left">
                            <div>
                                <div class="circle1 actived">
                                    <div></div>
                                </div>
                            </div>
                            <div class="line1"></div>
                            <div>
                                <div class="circle1">
                                    <div></div>
                                </div>
                            </div>
                            <div class="line1"></div>
                            <div>
                                <div class="circle1">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                        <div class="body-right">
                            <div class="right-item">
                                <div class="item-tit">
                                    <span>签约</span>
                                    <span>2020-06-25 00:00</span>
                                </div>
                                <div class="item-content">
                                    客户签约哈尔滨融创文旅城
                                </div>
                                <div class="item-foot">
                                    <span>王恒宇</span>-
                                    <span>案场顾问</span>
                                    (<span>15846559855</span>)
                                </div>
                            </div>
                            <div class="right-item">
                                <div class="item-tit">
                                    <span>到访</span>
                                    <span>2020-06-21 10:21</span>
                                </div>
                                <div class="item-content">
                                    客户到访哈尔滨融创文旅城
                                </div>
                                <div class="item-foot">
                                    <span>王恒宇</span>-
                                    <span>案场顾问</span>
                                    (<span>15846559855</span>)
                                </div>
                            </div>
                            <div class="right-item">
                                <div class="item-tit">
                                    <span>推荐</span>
                                    <span>2020-06-20 20:56</span>
                                </div>
                                <div class="item-content">
                                    客户<span>刘先生</span>(<span>183****8265</span>)报备成功
                                </div>
                                <div class="item-foot">
                                    <span>李爽</span>-
                                    <span>统一报备人</span>
                                    (<span>17607796555</span>)
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
        </div>
    </div>
    <!-- 电话插件 -->
    <div id="telephone">
        <div>
            <div class="tel">18345068265</div>
            <div class="mybtn">
                <div class="cancel">取消</div>
                <div>拨打</div>
            </div>
        </div>
    </div>
    <!-- 短信插件 -->
    <div id="note">
        <div>
            <div class="tel">18345068265</div>
            <div class="mybtn">
                <div class="cancel">取消</div>
                <div>发短信</div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            //  点击取消，隐藏弹框
            $("#note .cancel").click(function(){
                $("#note").css({"display":"none"});
            });
            $("#telephone .cancel").click(function(){
                $("#telephone").css({"display":"none"});
            });
            // 点击按钮显示弹框
            // 拨打电话
            $(".tele").click(function(){
                $("#telephone").css({"display":"block"});
            });
            // 发送短信
            $(".text").click(function(){
                $("#note").css({"display":"block"});
            });
        })
    </script>
</body>
</html>